<template>
  <div>
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div class="top-fl">
          <div class="topfls">
            <el-form-item label="">
              <el-input
                size="medium"
                v-model="formInline.communityname"
                placeholder="小区名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                size="medium"
                v-model="formInline.unitname"
                placeholder="单元名称"
              ></el-input>
            </el-form-item>
            <el-date-picker
              size="medium"
              v-model="formInline.createDt"
              type="date"
              placeholder="选择日期时间"
              align="right"
              format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-form-item label="">
              <el-select
                clearable
                v-model="formInline.value"
                placeholder="选择状态"
                style="min-width: 19vw; padding: 0px 0px 0px 10px"
                size="medium"
              >
                <el-option label="已建成" :value="1"></el-option>
                <el-option label="未建成" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" size="medium"
                ><i class="el-icon-search"></i
              ></el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                style="width: 100px"
                type="success"
                @click="addlist"
                size="medium"
              >
                <i class="el-icon-plus"></i>录入</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                style="width: 100px"
                type="primary"
                @click="reset"
                size="medium"
              >
                <i class="el-icon-refresh-left"></i>重置</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>

    <div class="min">
      <el-table
        :data="tableData"
        style="width: 100%"
        :border="true"
        stripe
        v-loading="loading"
      >
        <el-table-column label="小区名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.communityname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单元名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.unitname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="栋数" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.unitnum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="建设时间"
          align="center"
          prop="createtime"
          :formatter="timer"
        >
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.unitstatus == 1 ? "已建成" : "未建成" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="handleEdit(scope.$index, scope.row)"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDelete(scope.$index, scope.row)"
              >归档</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagebox">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
      loading: false,
      currentPage: 1, // 当前页码
      pagesize: 10, // 每页条数
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      value3: "",
      formInline: {
        communityname: "",
        unitname: "",
        createDt: "",
        value: "",
      },
      formInline2: {},
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 时间格式化
    timer(a, b, c) {
      return moment(c).format("YYYY-MM-DD HH:mm:ss");
    },
    // 搜索按钮
    async onSubmit() {
      this.loading = true;
      this.pass = true;
      if (this.formInline.createDt == null) {
        this.formInline.createDt = "";
      }
      if (this.formInline.value == null) {
        this.formInline.value = "";
      }
      if (this.formInline.createDt) {
        this.formInline.createDt = moment(this.formInline.createDt).format(
          "YYYY-MM-DD"
        );
      }
      this.formInline2 = JSON.parse(JSON.stringify(this.formInline));
      this.onSubmit2();
    },
    async onSubmit2() {
      await this.$axios
        .get("/house/searchList", {
          params: {
            communityname: this.formInline2.communityname,
            unitname: this.formInline2.unitname,
            createDt: this.formInline2.createDt,
            value: this.formInline2.value,
            currPage: this.currentPage,
            pageNum: this.pagesize,
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.loading = false;
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    //   console.log("submit!");

    // 重置按钮
    reset() {
      this.formInline = {};
      this.formInline2 = {};
      this.getList();
    },
    // 数据接口
    // 表格数据
    async getList() {
      this.loading = true;
      await this.$axios("/house/gethouseList", {
        params: {
          pageNum: this.pagesize,
          currPage: this.currentPage - 1,
        },
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.loading = false;
        // console.log(this.tableData);
      });
    },
    // 归档删除
    handleDelete(row, res) {
      // console.log(res.id);
      // console.log(sessionStorage.getItem('token'));
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.del(res.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async del(id) {
      await this.$axios("/house/delunitList", {
        params: {
          id: id,
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.data == "删除房屋信息成功") {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        }
      });
    },
    // 数据处理==================
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.pagesize = val;

      if (this.formInline2) {
        this.onSubmit2();
      } else {
        this.getList();
      }
    },
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.currentPage = val;
      if (this.formInline2) {
        this.onSubmit2();
      } else {
        this.getList();
      }
    },
    // 页面跳转
    //添加
    addlist() {
      this.$router.push({
        path: "/house/unadd",
        query: {
          flag: 1,
        },
      });
    },
    //详情
    handleEdit(row, index) {
      console.log(index.id);
      this.$router.push({
        path: "/house/unadd",
        query: {
          flag: 2,
          id: index.id,
        },
      });
    },
    // 编辑
    handleEdit(row, index) {
      console.log(index.id);
      this.$router.push({
        path: "/house/unadd",
        query: {
          flag: 2,
          id: index.id,
        },
      });
    },
  },
};
</script>
<style scoped>
.top {
  width: 100%;
  overflow: hidden;
}
.top-fl {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
}
.topfls {
  width: 65%;
  display: flex;
}
/* 使用深度选择器 */
::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.min {
  width: 100%;
}
.pagebox {
  margin-top: 10px;
  display: flex;
  justify-content: right;
}
.el-button--primary.is-plain,
.el-button--primary.is-plain {
  background-color: #ffffff00;
}
.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  color: #409eff;
}
.el-button--danger.is-plain,
.el-button--danger {
  background-color: #ffffff00;
}
.el-button--danger.is-plain:focus,
.el-button--danger.is-plain:hover {
  color: #f56c6c;
}
</style>